<p align="center">
    <a href="https://scrollrevealjs.org" title="Visit ScrollReveal home page">
        <img src="https://scrollrevealjs.org/img/logomark.svg" alt="ScrollReveal" width="120">
    </a>
</p>
<br>
<p align="center">
    <a href="https://scrollrevealjs.org" title="Visit ScrollReveal home page">
        <img width="200" src="https://scrollrevealjs.org/img/scrollreveal-logotype-dark.svg" alt="ScrollReveal">
    </a>
</p>
<p align="center">Animate elements as they scroll into view.</p>

<p align="center">
    <a href="https://travis-ci.org/jlmakes/scrollreveal">
        <img src="https://img.shields.io/travis/jlmakes/scrollreveal.svg" alt="Build status">
    </a>
    <a href="https://www.npmjs.com/package/scrollreveal">
        <img src="https://img.shields.io/npm/dm/scrollreveal.svg" alt="Monthly downloads">
    </a>
    <a href="https://www.npmjs.com/package/scrollreveal">
        <img src="https://img.shields.io/npm/v/scrollreveal.svg" alt="Version">
    </a>
    <img src="https://img.shields.io/badge/min+gzip-5.7_kB-blue.svg" alt="5.7 kB min+gzip">
    <a href="https://opensource.org/licenses/GPL-3.0">
        <img src="https://img.shields.io/badge/license-GPLv3-blue.svg" alt="GPLv3 License">
    </a>
</p>

<p align="center">
    <a href="https://saucelabs.com/u/scrollreveal">
        <img src="https://saucelabs.com/browser-matrix/scrollreveal.svg?y=1" alt="Browser compatibility matrix" width="100%">
    </a>
</p>

<br>

<br>

<h1 id="Introduction"><a href="#Introduction" class="headerlink" title="Introduction"></a>Introduction</h1><p>ScrollReveal is a JavaScript library for easily animating elements as they enter&#x2F;leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.</p>
<br>

<h1 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h1><h2 id="Browser"><a href="#Browser" class="headerlink" title="Browser"></a>Browser</h2><p>A simple and fast way to get started is to include this script on your page:</p>
<pre><code class="html">&lt;script src=&quot;https://unpkg.com/scrollreveal&quot;&gt;&lt;/script&gt;
</code></pre>
<p>This will create the global variable <code>ScrollReveal</code></p>
<blockquote>
<p>Be careful using this method in production. Without specifying a fixed version number, Unpkg may delay your page load while it resolves the latest version. Learn more at <a href="https://unpkg.com/">unpkg.com</a></p>
</blockquote>
<h2 id="Module"><a href="#Module" class="headerlink" title="Module"></a>Module</h2><pre><code class="bash">npm install scrollreveal
</code></pre>
<h4 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h4><pre><code class="js">const ScrollReveal = require(&#39;scrollreveal&#39;)
</code></pre>
<h4 id="ES2015"><a href="#ES2015" class="headerlink" title="ES2015"></a>ES2015</h4><pre><code class="js">import ScrollReveal from &#39;scrollreveal&#39;
</code></pre>
<br>

<h1 id="Usage"><a href="#Usage" class="headerlink" title="Usage"></a>Usage</h1><p>Installation provides us with the constructor function <a href="https://scrollrevealjs.org/api/constructor.html"><code>ScrollReveal()</code></a>. Calling this function returns the ScrollReveal instance, the “brain” behind the magic.</p>
<blockquote>
<p>ScrollReveal employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.</p>
</blockquote>
<p>There’s a lot we can do with this instance, but most of the time we’ll be using the <a href="https://scrollrevealjs.org/api/reveal.html"><code>reveal()</code></a> method to create animation. Fundamentally, this is how to use ScrollReveal:</p>
<pre><code class="html">&lt;h1 class=&quot;headline&quot;&gt;
    Widget Inc.
&lt;/h1&gt;
</code></pre>
<pre><code class="js">ScrollReveal().reveal(&#39;.headline&#39;)
</code></pre>
<p><strong>🔎 See this demo live on <a href="http://jsbin.com/jufohaxonu/edit?html,output">JSBin</a></strong></p>
<br>

<hr>
<h3 id="The-full-documentation-can-be-found-at-https-scrollrevealjs-org"><a href="#The-full-documentation-can-be-found-at-https-scrollrevealjs-org" class="headerlink" title="The full documentation can be found at https://scrollrevealjs.org"></a>The full documentation can be found at <a href="https://scrollrevealjs.org/">https://scrollrevealjs.org</a></h3><blockquote>
<p>If you’re using an older version of ScrollReveal, you can find legacy documentation in the <a href="https://github.com/jlmakes/scrollreveal/wiki">wiki</a></p>
</blockquote>
<hr>
<br>

<a href="https://scrollrevealjs.org/pricing/" title="Visit ScrollReveal pricing page">
    <img align="right" height="300" src="https://scrollrevealjs.org/img/license.svg" alt="Commercial License Badge">
</a>

<br>

<h1 id="License"><a href="#License" class="headerlink" title="License"></a>License</h1><p><strong>For commercial sites, themes, projects, and applications, keep your source code private&#x2F;proprietary by purchasing a <a href="https://scrollrevealjs.org/pricing/">Commercial License</a>.</strong></p>
<p>Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.</p>
<br>

<p>Copyright 2021 Fisssion LLC</p>
